@import "../../common/stylus/mixin.styl"
.food 
    position: fixed
    left: 0
    top: 0
    bottom: 48px
    z-index: 30
    width:100%
    background-color: #fff
    &.fade-enter-active, &.fade-leave-active
        transition: all 0.3s linear 
        transform: translate3d(0,0,0)
    &.fade-enter, &.fade-leave-active
        opacity:0
        transform:translate3d(100%,0,0)
    .image-header
        position: relative
        width:100%
        height: 0
        padding-top:100%  //padding-top是相对于width的，这样能够设置一个宽高相等的容器
        img 
            position:absolute
            top: 0
            width: 100%
            height: 100%
        .back
            position: absolute
            top: 10px
            left: 0
            .iconfont
                display: block
                font-size: 20px
                padding: 10px
                color: #fff
    .content 
        position: relative
        padding: 18px
        .title 
            margin-bottom: 8px
            font-size: 14px
            line-height: 14px
            font-weight: 700
            color: rgb(7, 17, 27)
        .detail 
            margin-bottom: 18px
            height: 10px
            line-height: 10px
            font-size:0
            .sell-count, .rating
                display: inline-block
                font-size: 10px
                color: rgb(147, 153, 159)
            .sell-count
                margin-right: 12px
    .price
        font-weight: 700px
        line-height: 24px
        .now
            margin-right:8px
            font-size: 14px
            color: rgb(240, 20, 20)
        .old
            text-decoration: line-through
            font-size:10px
            color: rgb(147,153,159)
    .cartcontrol-wrapper
        position: absolute
        right: 12px
        bottom: 12px
    .buy
        position: absolute
        right: 18px
        bottom: 18px
        z-index: 10
        height: 24px
        line-height: 24px
        padding: 0 12px
        box-sizing: border-box
        border-radius: 12px
        font-size: 10px
        color: #fff
        background-color: rgb(0, 160, 220)
        &.buy-enter-active, &.buy-leave-active
            transition: all 0.3s
            opacity: 0
        &.buy-enter, &.buy-leave-active
            opacity: 0
    .info 
        padding: 18px
        .title 
            line-height: 14px
            margin-bottom: 6px
            font-size: 14px
            color: rgb(7, 17, 27)
        .text 
            font-size: 12px
            line-height: 24px
            padding: 0 8px
            color: rgb(77, 85, 93)
    .rating
      padding-top 18px
      .title
        line-height 14px
        margin-left 18px
        font-size 14px
        color rgb(7, 17, 27)
      .rating-wrapper
          padding: 0 18px
          .rating-item
              position: relative
              padding: 16px 0
              border-1px(rgba(7, 17, 27, 0.1))
              .user
                  position: absolute
                  right:0
                  top:16px
                  font-size:0
                  line-height: 12px
                  .name 
                      display: inline-block
                      vertical-align: top
                      font-size:10px
                      color: rgb(147, 153, 159)
                      margin-right: 6px
                  .avatar
                      border-radius:50%
              .time 
                  margin-bottom: 6px
                  margin-right: 4px
                  line-height: 12px
                  font-size: 10px
                  color: rgb(147, 153, 159)
              .text
                line-height 16px
                font-size 12px
                color rgb(7, 17, 27)
                .iconfont
                  margin-right 4px
                  line-height 16px
                  font-size 12px
                .icon-damuzhi
                    color rgb(0, 160, 220)
                .icon-down
                    color rgb(147, 153, 159)
      .no-rating
        padding 16px 0
        font-size 12px
        color rgb(147, 153, 159)


